<template>
  <view>
    <uni-card is-full>
      <text class="uni-h6">标签组件多用于商品分类、重点内容显示等场景。</text>
    </uni-card>

    <uni-section title="实心标签" type="line">
      <view class="uni-padding-wrap uni-common-mt">
        <uni-segmented-control
          :current="current"
          :values="items"
          :style-type="styleType"
          :active-color="activeColor"
          @clickItem="onClickItem"
        />
      </view>
      <view class="content">
        <view v-if="current === 0"
          ><text class="content-text">选项卡1的内容</text></view
        >
        <view v-if="current === 1"
          ><text class="content-text">选项卡2的内容</text></view
        >
        <view v-if="current === 2"
          ><text class="content-text">选项卡3的内容</text></view
        >
      </view>
    </uni-section>

    <uni-section title="Style" type="line"></uni-section>
    <view class="example-body">
      <radio-group class="uni-list" @change="styleChange">
        <view
          v-for="(item, index) in styles"
          :key="index"
          class="uni-list-item"
        >
          <view class="uni-list-item__container">
            <view class="uni-list-item__content">
              <text class="uni-list-item__content-title">{{ item.text }}</text>
            </view>
            <view class="uni-list-item__extra">
              <radio :value="item.value" :checked="item.checked" />
            </view>
          </view>
        </view>
      </radio-group>
    </view>
    <uni-section title="Color" type="line"></uni-section>
    <view class="example-body">
      <radio-group class="uni-list" @change="colorChange">
        <view
          v-for="(item, index) in colors"
          :key="index"
          class="uni-list-item"
        >
          <view class="uni-list-item__container">
            <view class="uni-list-item__content">
              <view :style="{ backgroundColor: item }" class="color-tag" />
            </view>
            <view class="uni-list-item__extra">
              <radio :value="item" :checked="index === colorIndex" />
            </view>
          </view>
        </view>
      </radio-group>
    </view>
  </view>
</template>
<script>
  export default {
    components: {},
    data() {
      return {
        items: ["选项卡1", "选项卡2", "选项卡3"],
        styles: [
          {
            value: "button",
            text: "按钮",
            checked: true,
          },
          {
            value: "text",
            text: "文字",
          },
        ],
        colors: ["#007aff", "#4cd964", "#dd524d"],
        current: 0,
        colorIndex: 0,
        activeColor: "#007aff",
        // styleType: "button",
        styleType: "text",
      };
    },
    methods: {
      onClickItem(e) {
        if (this.current !== e.currentIndex) {
          this.current = e.currentIndex;
        }
      },
      styleChange(e) {
        if (this.styleType !== e.detail.value) {
          this.styleType = e.detail.value;
        }
      },
      colorChange(e) {
        if (this.styleType !== e.detail.value) {
          this.activeColor = e.detail.value;
        }
      },
    },
  };
</script>
<style lang="scss">
  .example-body {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    padding: 0;
  }

  .uni-common-mt {
    margin-top: 30px;
  }

  .uni-padding-wrap {
    // width: 750rpx;
    padding: 0px 30px;
  }

  .content {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    justify-content: center;
    align-items: center;
    height: 150px;
    text-align: center;
  }

  .content-text {
    font-size: 14px;
    color: #666;
  }

  .color-tag {
    width: 25px;
    height: 25px;
  }

  .uni-list {
    flex: 1;
  }

  .uni-list-item {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex: 1;
    flex-direction: row;
    background-color: #ffffff;
  }

  .uni-list-item__container {
    padding: 12px 15px;
    width: 100%;
    flex: 1;
    position: relative;
    /* #ifndef APP-NVUE */
    display: flex;
    box-sizing: border-box;
    /* #endif */
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #eee;
  }

  .uni-list-item__content-title {
    font-size: 14px;
  }
</style>
